<template>
	<view class="container">
		<view class='p_30 topLine3'>
			<!-- 轮播图 -->
			<view class='swipers'>
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				 :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
						<image :src="item.src" />
					</swiper-item>
				</swiper>
			</view>

			<!-- 菜单 -->
			<view class='menuBox'>
				<view class='menus'>
					<navigator url='' class='menu'>
					  <image src='../../static/icon_yuwen2x.png'></image>
					  <view>语文</view>
					</navigator>
					<navigator url='' class='menu'>
					  <image src='../../static/icon_shuxue2x.png'></image>
					  <view>数学</view>
					</navigator>
					<navigator url='' class='menu'>
					  <image src='../../static/icon_english2x.png'></image>
					  <view>英语</view>
					</navigator>
				</view>
				<navigator url='' class='menuMore'>
					<image src='../../static/icon_moreb2x.png'></image>
					<view>更多</view>
				</navigator>
			</view>
		</view>

		<!-- 预约直播 -->
		<view class='orderedLive topLine3'>
			<view class='justify_between mlr_30'>
				<view class='fs_34 fontWeight'>预约直播</view>
				<navigator url="/pages/orderLive/orderLive" class='more'>更多<image src='../../static/more2x.png'></image>
				</navigator>
			</view>
			<scroll-view scroll-x class='scroll_view'>
				<view class='scrollList' v-for="(order, index) in orders" :key="index">
					<image :src='order.orderImg'></image>
					<view class='states'>
						<view class='state'>
							<image :src='order.state'></image>
							{{order.stateTxt}}
						</view>
						<view class='startTime'>{{order.start}}开播</view>
					</view>
					<view class='liveInfo'>
						<view class='liveTitle ellipsis'>{{order.title}}</view>
						<view class='justify_between'>
							<view class='fs_20'>{{order.teacher}}</view>
							<view class='comment'>
								<image src='../../static/icon_pingjia2x.png'></image>评价{{order.comment}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 重磅推荐 -->
		<view class="plr_30">
			<view class='justify_between pieceTitle'>
				<view>重磅推荐</view>
				<navigator url='' class='more'>更多<image src='../../static/more2x.png'></image>
				</navigator>
			</view>
			<view class="recommend">
				<view class="liveState liveState1">
					<image :src="zbStata"></image>{{zbTxt}}
				</view>
				<image src="../../static/banner1x.png" />
			</view>
			<view class='mtb_20'>
				<view class='justify_between'>
					<view class='fs_30'>{{zbTitle}}</view>
					<view class="statistics">
						<image src='../../static/icon_zaixian2x.png'></image>
						<text>{{onLine}}在线</text>
						<image src='../../static/icon_news2x.png'></image>
						<text>{{speak}}条发言</text>
					</view>
				</view>
			</view>

			<view class='justify_between'>
				<view class='recom' v-for="(zb, index) in zbs" :key="index">
					<view class="liveState" :class="zb.stateTxt == '未开播'?'liveState2':'liveState3'">
						<image :src="zb.state"></image>{{zb.stateTxt}}
					</view>
					<image :src='zb.src' class="recomImg"></image>
					<view class='fs_30'>{{zb.title}}</view>
					<view class='stateTxt'>
						<image :src="zb.icon"></image>
						{{zb.tips}}
					</view>
				</view>
			</view>
		</view>

		<!-- 营销活动 -->
		<view class="plr_30">
			<view class='pieceTitle'>营销活动类</view>
			<view class="justify_between">
				<view class="leftImg">
					<image :src="marketImg1"></image>
				</view>
				<view class="rightImg">
					<image :src="marketImg2"></image>
					<image :src="marketImg3"></image>
				</view>
			</view>
		</view>

		<!-- 推新产品 -->
		<view class='orderedLive'>
			<view class='justify_between mlr_30'>
				<view class='fs_34 fontWeight'>推新产品</view>
				<navigator url="/pages/orderLive/orderLive" class='more'>更多<image src='../../static/more2x.png'></image>
				</navigator>
			</view>
			<scroll-view scroll-x class='scroll_view'>
				<view class='scrollList newScroll' v-for="(recommend, index) in recommends" :key="index">
					<image :src='recommend.img'></image>
					<view class='newInfo'>
						<view class='justify_between'>
							<view class='fs_30'>{{recommend.title}}</view>
							<view class="fs_22 color_9d">{{recommend.buy}}人购买</view>
						</view>
						<view class='justify_between'>
							<view class='fs_30 color_red'>￥{{recommend.current}}<text class="original">￥{{recommend.original}}</text></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 个性推荐 -->
		<view class="plr_30">
			<view class='pieceTitle'>个性推荐</view>
			<view class="posi_rela">
				<image src="../../static/img_052x.png" class="tjbg"></image>
				<view class="TopBox">
					<view class="justify_between">
						<view class="TopTitle">
							<view class="fs_36">本周最受欢迎Top3</view>
							<view class="fs_24">更新于{{month}}月{{day}}日</view>
						</view>
						<image src="../../static/more.png" class="hyMore"></image>
					</view>
					<view class="TopList" v-for="(top, index) in tops" :key="index">
						<image :src="top.img"></image>
						<view class="ml_20">
							<view class="fs_34">{{top.title}}</view>
							<view class="fs_24 color_9d mt_20">{{top.tips}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 热门课程 -->
		<view class="plr_30">
			<view class='justify_between pieceTitle'>
				<view>热门课程推荐</view>
				<navigator url='' class='more'>更多<image src='../../static/more2x.png'></image>
				</navigator>
			</view>
			<view class='hotCourses'>
				<view class='hotCourse' v-for="(hot, index) in hots" :key="index">
					<image :src='hot.img'></image>
					<view class='fs_30'>{{hot.title}}</view>
					<view class='fs_26 color_9d'>{{hot.score}}分 | {{hot.num}}人学过</view>
					<view class='fs_36 color_red'>￥{{hot.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorColor: '#ccc',
				indicatorActiveColor: '#fff',
				carouselList: [{
						src: "../../static/banner.png"
					},
					{
						src: "../../static/banner.png"
					}
				],
				orders: [{
						orderImg: '../../static/img01.png',
						state: '../../static/icon_weikaibo2x.png',
						stateTxt: '未开播',
						start: '10:20:00',
						title: '冯勇老师四年级英语作文讲解',
						teacher: '冯勇老师',
						comment: '3210'
					},
					{
						orderImg: '../../static/img01.png',
						state: '../../static/icon_weikaibo2x.png',
						stateTxt: '未开播',
						start: '10:20:00',
						title: '冯勇老师四年级英语作文讲解',
						teacher: '冯勇老师',
						comment: '3210'
					},
					{
						orderImg: '../../static/img01.png',
						state: '../../static/icon_weikaibo2x.png',
						stateTxt: '未开播',
						start: '10:20:00',
						title: '冯勇老师四年级英语作文讲解',
						teacher: '冯勇老师',
						comment: '3210'
					}
				],
				zbStata: '../../static/icon_zhibozhong2x.png',
				zbTxt: '直播中',
				zbTitle: '集合与基本函数',
				onLine: '6138',
				speak: '1215',
				zbs: [{
						state: '../../static/icon_weikaibo2x.png',
						stateTxt: '未开播',
						src: '../../static/banner2.png',
						title: '集合与基本初等函数',
						icon: '../../static/icon_Countdown.png',
						tips: '06-06 18:00开始'
					},
					{
						state: '../../static/icon_huifang2x.png',
						stateTxt: '回放',
						src: '../../static/banner3x.png',
						title: '集合与基本初等函数',
						icon: '../../static/icon_watch2x.png',
						tips: '1210'
					}
				],
				marketImg1: '../../static/img_012x.png',
				marketImg2: '../../static/img_022x.png',
				marketImg3: '../../static/img_032x.png',
				recommends: [{
						img: '../../static/img_042x.png',
						title: '初中英语培训',
						buy: '1823',
						current: '169',
						original: '199'
					},
					{
						img: '../../static/img_042x.png',
						title: '初中英语培训',
						buy: '1823',
						current: '169',
						original: '199'
					}
				],
				month: '7',
				day: '22',
				tops: [{
						img: '../../static/img_062x.png',
						title: '数学-1元体验课',
						tips: '适合想了解长期班课的同学'
					},
					{
						img: '../../static/img_072x.png',
						title: '提升班(全国人教版)',
						tips: '适合提分率低于75%的同学'
					},
					{
						img: '../../static/img_082x.png',
						title: '尖端班(全国人教版)',
						tips: '适合想了解长期班课的同学'
					}
				],
				hots: [{
						img: '../../static/img_kecheng2x.png',
						title: '2018年高一数理化课程试卷讲解',
						score: '4.8',
						num: '1210',
						price: '399'
					},
					{
						img: '../../static/img_kecheng2x.png',
						title: '2018年高一数理化课程试卷讲解',
						score: '4.8',
						num: '1210',
						price: '399'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">

	/* 轮播图 */
	.swiper {
		height: 303rpx;
	}

	.swiper image {
		width: 690rpx;
		height: 303rpx;
	}

	/* 菜单 */
	.menuBox {
		padding-top: 30rpx;
	}

	.menus {
		display: inline-block;
		width: 75%;
	}

	.menu {
		display: inline-block;
		width: 33%;
		text-align: center;
	}

	.menu image {
		width: 68rpx;
		height: 68rpx;
	}

	.menuMore {
		display: inline-block;
		width: 25%;
		text-align: center;
	}

	.menuMore image {
		width: 68rpx;
		height: 68rpx;
	}

	.more {
		font-size: 24rpx;
		color: #919191;
	}

	.more image {
		width: 12rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	/* 直播 */
	.orderedLive {
		padding-top: 30rpx;
	}

	.scroll_view {
		white-space: nowrap;
		margin-top: 30rpx;
	}

	.scrollList {
		display: inline-block;
		position: relative;
		width: 310rpx;
		overflow: hidden;
		margin-left: 30rpx;
	}

	.scrollList>image {
		display: block;
		width: 310rpx;
		height: 180rpx;
	}

	.states {
		position: absolute;
		top: 125rpx;
		left: 15rpx;
	}

	.state {
		font-size: 18rpx;
		color: #fff;
		padding: 4rpx 6rpx;
		border-radius: 5rpx;
		background: -webkit-linear-gradient(left, #9D9D9D, #BBBCBC);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #9D9D9D, #BBBCBC);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #9D9D9D, #BBBCBC);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #9D9D9D, #BBBCBC);
		/* 标准的语法 */
		display: inline-block;
	}

	.state image {
		display: inline-block;
		width: 16rpx;
		height: 16rpx;
	}

	.startTime {
		display: inline-block;
		color: #fff;
		font-size: 16rpx;
		background-color: rgba(0, 0, 0, .2);
		padding: 4rpx 6rpx;
		border-top-right-radius: 5rpx;
		border-bottom-right-radius: 5rpx;
	}

	.liveInfo {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F8F9FA;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.liveTitle {
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.comment {
		font-size: 18rpx;
	}

	.comment image {
		display: inline-block;
		width: 22rpx;
		height: 21rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	/* 重磅推荐 */
	.recommend {
		position: relative;
	}

	.recommend image {
		width: 100%;
		height: 290rpx;
	}

	.liveState {
		position: absolute;
		top: 20rpx;
		left: 0;
		color: #fff;
		font-size: 22rpx;
		padding: 5rpx 20rpx 5rpx 10rpx;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		z-index: 1;
	}

	.liveState1 {
		background: -webkit-linear-gradient(left, #F13986, #FD3F5C);
		background: -o-linear-gradient(right, #F13986, #FD3F5C);
		background: -moz-linear-gradient(right, #F13986, #FD3F5C);
		background: linear-gradient(to right, #F13986, #FD3F5C);
	}

	.liveState2 {
		background: -webkit-linear-gradient(left, #9D9D9D, #BEBEBE);
		background: -o-linear-gradient(right, #9D9D9D, #BEBEBE);
		background: -moz-linear-gradient(right, #9D9D9D, #BEBEBE);
		background: linear-gradient(to right, #9D9D9D, #BEBEBE);
	}

	.liveState3 {
		background: -webkit-linear-gradient(left, #349FE5, #30BDEF);
		background: -o-linear-gradient(right, #349FE5, #30BDEF);
		background: -moz-linear-gradient(right, #349FE5, #30BDEF);
		background: linear-gradient(to right, #349FE5, #30BDEF);
	}

	.liveState image {
		width: 16rpx;
		height: 16rpx;
		margin-right: 10rpx;
	}

	.statistics image {
		width: 20rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	.statistics text {
		font-size: 22rpx;
		color: #919191;
		margin-left: 10rpx;
	}

	.recom {
		flex-basis: 48%;
		position: relative;
	}

	.recom>image {
		width: 100%;
		height: 190rpx;
	}

	.stateTxt {
		color: #9D9D9D;
		font-size: 24rpx;
	}

	.stateTxt image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	/* 营销 */
	.leftImg {
		width: 334rpx;
	}

	.leftImg image {
		width: 100%;
		height: 391rpx;
	}

	.rightImg {
		width: 336rpx;
	}

	.rightImg image {
		width: 100%;
		height: 187rpx;
	}

	/* 推新 */
	.newScroll {
		width: 435rpx;
	}

	.newScroll>image {
		width: 100%;
		height: 230rpx;
	}

	.newInfo {
		padding: 20rpx 0;
	}

	.original {
		font-size: 20rpx;
		text-decoration: line-through;
		color: #A1A1A1;
	}

	/* 个性推荐 */
	.tjbg {
		width: 100%;
		height: 807rpx;
	}

	.TopBox {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.TopTitle {
		color: #fff;
	}

	.TopTitle .fs_24 {
		opacity: 0.6;
		margin-top: 10rpx;
	}

	.hyMore {
		width: 50rpx;
		height: 50rpx;
	}

	.TopBox>.justify_between {
		margin-bottom: 60rpx;
	}

	.TopList {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		margin-bottom: 20rpx;
	}

	.TopList image {
		width: 129rpx;
		height: 129rpx;
	}

	/* 热门课程 */
	.pieceTitle {
		padding: 30rpx 0;
		font-size: 34rpx;
		font-weight: 600;
	}

	.hotCourses {
		display: flex;
		flex-wrap: wrap;
	}

	.hotCourse {
		flex-basis: 48%;
		margin-bottom: 2%;
	}

	.hotCourses .hotCourse:nth-child(odd) {
		margin-right: 4%;
	}

	.hotCourse image {
		width: 100%;
		height: 248rpx;
	}
</style>
